<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://cdn.bootcss.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap/2.3.2/css/bootstrap-responsive.min.css" rel="stylesheet">
    <title>移动式人脸考勤系统-添加考勤人员</title>

    <style type="text/css">
        body {
            padding-top: 40px;
            padding-bottom: 40px;
            background-color: #f5f5f5;
        }

        .form-signin {
            max-width: 300px;
            padding: 19px 29px 29px;
            margin: 0 auto 20px;
            background-color: #fff;
            border: 1px solid #e5e5e5;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
            -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
            box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
        }

        .form-signin .form-signin-heading,
        .form-signin .checkbox {
            margin-bottom: 10px;
        }

        .form-signin input[type="text"],
        .form-signin input[type="password"] {
            font-size: 16px;
            height: auto;
            margin-bottom: 15px;
            padding: 7px 9px;
        }


        .fileinput-button {
            position: relative;
            display: inline-block;
            overflow: hidden;
        }

        .fileinput-button input {
            position: absolute;
            right: 0px;
            top: 0px;
            opacity: 0;
            font-size: 200px;
        }

        img {
            widows: 220px;
            clear: both; 
            display: block; 
            margin:auto; 
        }
    </style>
</head>

<body>
    <div class="container">
        <form id="form" name="form" class="form-signin" enctype="multipart/form-data">

            <img id="img" name="img" class="img-responsive" src="/img/2.jpg" alt="请单击拍照上传图片"/>
            <hr />
            <input type="text" name="userName" class="input-block-level" placeholder="userName address">
            <input type="text" name="userCode" class="input-block-level" placeholder="userCode address">
            <hr />
            <span id="file_container" class="btn btn-large btn-block fileinput-button">
                <span>拍照</span>
                <input type="file" id="file" name="file" accept="image/*" capture="camera">
            </span>
            <a id="upload" name="upload" class="btn btn-large btn-block btn-success" href="javascript://" style="display: none">上传</a>
        </form>
    </div>

</body>
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
    $("#file").change(function () {
        $("#img").attr("src", URL.createObjectURL($(this)[0].files[0]));
        $("#file_container").hide();
        $("#upload").show();
    });
    $("#upload").click(function () {
        if ($("#file").val() != "") {
            var formdata = new FormData($('#form')[0]);
            $.ajax({
                type: 'POST',
                url: "/user/addUser",
                data: formdata,
                async: false,
                cache: false,
                processData: false,
                contentType: false,
                dataType: "text",
                success: function (date) {
                    alert(date);
                    $("#upload").hide();
                    $("#file").val("");
                },
                error: function () {
                    alert("上传失败");
                }
            });
            $("#file_container").show();
        } else {
            alert("请勿重复上传");
        }
    });
</script>

</html>